import { useCallback, useEffect, useRef, useState } from "react";
import * as echarts from 'echarts';
import { EChartsOption } from "echarts";
import { ICompleteAnalyse } from "../../../../../type/workBench";
import { getReportBfData, getReportCompleteAnalyse } from "../../api";
import { message, Table } from "antd";
import { ColumnsType } from "antd/es/table";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";

const WeightData = () => {

    const echartsBox = useRef<HTMLDivElement>(null);
    let echartsClass = useRef<echarts.ECharts>()
    const [colors, setColors] = useState<string[]>([]); // 存储饼图的颜色数组
    const [datalist, setDataList] = useState<ICompleteAnalyse[]>([])
    const [countlist, setCountList] = useState<{mzTodayCars:number,pzTodayCars:number}>()
    const listFun = useCallback(async () => {
        const { code, msg, data } = await getReportCompleteAnalyse() as { code: number, msg: string, data: ICompleteAnalyse[] };
        if (code === 20000) {
            setDataList(data)
        } else {
            message.error(msg);
        }
    }, [])
    //getReportBfData
    const countFun = useCallback(async () => {
        const { code, msg, data } = await getReportBfData() as { code: number, msg: string, data: { mzTodayCars: number, pzTodayCars: number } };
        if (code === 20000) {
            setCountList(data)
        } else {
            message.error(msg);
        }
    }, [])
    useEffect(() => {
        listFun()
        countFun()
    }, [listFun, countFun])

    useEffect(() => {
        const resizeListener = () => {
            echartsClass.current?.resize()
        }
        resizeListener()
        window.addEventListener('resize', resizeListener);

        return () => {
            window.removeEventListener('resize', resizeListener);
        }
    }, [])

    useEffect(() => {
        // 初始化echarts
        setTimeout(() => {
            if (echartsBox) {
                var echarts_box_html = document.getElementById('echarts_box')!;
                echartsClass.current = echarts.init(echarts_box_html);
                ; (async () => {
                    if (datalist?.length > 0) {
                        const Arr = datalist.map((item: ICompleteAnalyse,index) => {
                            return {
                                value: item.completeNum,
                                name: item.goodsName,
                                itemStyle: {
                                    color: `hsl(${index * 60}, 50%, 50%)`, 
                                }
                            }
                        })
                        var option: EChartsOption = {
                            legend: {
                                orient: 'horizontal',  
                                left: 'center',  
                                top: 'bottom',  
                                itemWidth: 10,  
                                itemHeight: 10,  
                                icon: 'roundRect',  
                                textStyle: {
                                    fontSize: 12,  
                                    color: '#333'  
                                }
                            },
                            series: [
                                {
                                    name: 'Access From',
                                    type: 'pie',
                                    radius: '50%',
                                    center: ['50%', '35%'],
                                    data: Arr,
                                    label: {
                                        show: false  // 禁用扇形上的文字标签
                                    },
                                    labelLine: {
                                        show: false  // 禁用每个扇形的标识线
                                    }
                                }
                            ]
                        };
                        const colors = Arr.map((item) => item.itemStyle.color);
                        setColors(colors); // 存储颜色数组
                        option && echartsClass.current!.setOption(option);
                    }
                }
                )()
            }
        },10)
        
    }, [datalist])


     const columns: ColumnsType<ICompleteAnalyse> = [
        {
        title: "序号",
        align: "center",
        width: useWindowFontSize(60),
        render: (text, record, index) => <span>{index + 1}</span>
        },
        {
        title: "品种",
        align: "center",
        width: useWindowFontSize(60),
        dataIndex: "goodsName",
        render(value, record, index) {
            return (
                <div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>
                    <div style={{
                        width: '2rem',
                        height: '1rem',
                        background: colors[index],
                        borderRadius: '20%',
                        marginRight: '0.5rem'
                    }}></div>
                    <div>{record.goodsName}</div>
                </div>
            )
        },
        },
        {
        title: "数量(吨)",
        align: "center",
        width: useWindowFontSize(60),
        dataIndex: "completeNum",
        },
        {
        title: "占比",
        align: "center",
        width: useWindowFontSize(60),
        dataIndex: "completePart",
        }
     ]

    return (
        <div className="bangfang">
            {/* 左中右 */}
            <div className="bangfang-left">
                <div className="left-title">
                    磅房数据
                </div>
                <div className="left-item">
                    <div className="item-jpg png1"></div>
                    <div className="item-main">
                        <div className="bang-item-title">今日过皮车数</div>
                        <div className="bang-item-value">
                            {countlist?.pzTodayCars}
                            <span>辆</span>
                        </div>
                    </div>
                </div>
                <div className="left-item" style={{ marginTop: '1.5rem' }}>
                    <div className="item-jpg png2"></div>
                    <div className="item-main">
                        <div className="bang-item-title">今日过毛车数</div>
                        <div className="bang-item-value">
                            {countlist?.mzTodayCars}
                            <span>辆</span>
                        </div>
                    </div>
                </div>
            </div>
            <div className="bangfang-main">
                <div className="left-title">
                    今日已执行品类分析
                </div>
                <div id="echarts_box" style={{
                    width: '100%', 
                    height: '23rem',
                    backgroundColor: '#fff',
                }} ref={echartsBox}></div>
            </div>
            <div className="bangfang-right">
                <Table
                    columns={columns}
                    dataSource={datalist}
                    pagination={false}
                    size="small"
                    scroll={{y:300}}
                    />
            </div>

        </div>
    )
}
export default WeightData